<script setup>
import {shallowReactive, shallowRef} from "vue";
import router from "../../../router";
import {saveApi} from "../../../api/direction.js";
import {RULE} from "../../../const";
import MyNav from "../../../components/MyNav.vue";
import MyForm from "../../../components/MyForm.vue";

/* ==================== 添加表单 ==================== */

// 表单项
let items = shallowRef([
  {'label': '方向名称', 'prop': 'name', 'required': true, 'span': 12},
  {'span': 12, 'hidden': true},
  {'label': '总学时', 'prop': 'totalHours', 'span': 12},
  {'label': '方向描述', 'prop': 'info', 'type': 'textarea'},
]);
// 表单值
let data = shallowReactive({});
// 表单规则
let rules = {
  'info': RULE.COMMON_INFO,
};

</script>

<template>

  <my-nav :items="[
    {'icon': 'Avatar', 'label': '班级管理', 'url': '/Direction'},
    {'icon': 'User', 'label': '方向列表', 'url': '/Direction'},
    {'icon': 'Plus', 'label': '添加方向'},
  ]"/>

  <el-divider/>

  <el-card class="direction-insert-card" header="添加方向信息">
    <my-form type="insert"
             :items="items"
             :data="data"
             :rules="rules"
             :api="saveApi"
             :fn="() => router.push('/Direction')"/>
  </el-card>
</template>

<style scoped lang="scss">
.direction-insert-card {
  width: 60%;
  margin: auto;
}
</style>